<template>
  <div id="login">
    <div v-if="!$store.state.isPhone" class="back_img">
      <div class="shade">
        <div class="title">CTF 竞赛知识系统</div>
      </div>
    </div>
    <div class="form">
      <el-form :model="params" status-icon :rules="rules" ref="login" :hide-required-asterisk="true"
               @keyup.enter.native="submitForm()">
        <div class="form_title">登 录</div>
        <el-form-item prop="account">
          <el-input v-model="params.account" @input="accountInput" placeholder="账号"
                    prefix-icon="el-icon-user"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="params.password" @input="passwordInput" placeholder="密码" type="password"
                    prefix-icon="el-icon-lock" show-password>
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-row>
            <el-col :span="16">
              <el-input v-model="params.code" placeholder="验证码" prefix-icon="el-icon-lock"
                        style="margin-right: 5px;"></el-input>
            </el-col>
            <el-col :span="8" class="align-right">
              <ImgCode :sign.sync="params.verifySign" ref="imgCode"
                       style="width: 90%; height: 39px; margin-left: 10%;"/>
            </el-col>
          </el-row>
        </el-form-item>
        <div class="form-buttons">
          <el-button type="primary" class="form_btn" @click="submitForm" :loading='loading'>登录</el-button>
          <el-button type="success" class="form_btn" @click="register" :loading='loading'>注册</el-button>
        </div>
      </el-form>

    </div>
    <el-dialog
        title="注册"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
      <el-form v-model="registerForm">
        <el-form-item prop="account">
          <el-input v-model="registerForm.account" @input="registerAccountInput" placeholder="请输入账号"
                    prefix-icon="el-icon-user"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="registerForm.password" @input="registerPasswordInput" placeholder="请输入密码" type="password"
                    prefix-icon="el-icon-lock" show-password>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="registerForm.confirmPassword" @input="registerConfirmPasswordInput" placeholder="请确认密码" type="password"
                    prefix-icon="el-icon-lock" show-password>
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-row>
            <el-col :span="16">
              <el-input v-model="registerForm.code" placeholder="验证码" prefix-icon="el-icon-lock"
                        style="margin-right: 5px;"></el-input>
            </el-col>
            <el-col :span="8" class="align-right">
              <ImgCode :sign.sync="params.verifySign" ref="imgCode"
                       style="width: 90%; height: 39px; margin-left: 10%;"/>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitRegister(registerForm)">提交</el-button>
          <el-button @click="resetRegisterForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>


<script>
import ImgCode from '@/components/utils/ImgCode'
import rsa from '@/utils/rsa'
import {
  setAdminToken
} from '@/utils/auth'
import {rmBlank} from "@/utils/strUtils";

export default {
  components: {
    ImgCode
  },

  data() {
    return {
      registerForm: {
        account: '',
        password: '',
        confirmPassword: '',
        code: ''
      },
      centerDialogVisible: false,
      logo: require('@/assets/img/logo.png'),
      params: {
        account: '',
        password: '',
        code: '',
        verifySign: '',
      },
      rules: {
        account: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }],
        code: [{
          required: true,
          message: '请输入验证码',
          trigger: 'blur'
        }]
      },
      verifyCode: {
        codeUrl: '',
        sign: '',
        code: '',
      },
      loading: false,
    }
  },

  methods: {
    resetRegisterForm() {
      this.registerForm.account = '';
      this.registerForm.password = '';
      this.registerForm.confirmPassword = '';
    },
    submitRegister(registerForm) {
      if(registerForm.password != registerForm.confirmPassword) {
        this.$message.error('两次密码不一致!')
      }
      this.$message.success("注册成功!")


    },
    accountInput(v) {
      this.params.account = rmBlank(v)
    },
    passwordInput(v) {
      this.params.password = rmBlank(v)
    },
    registerAccountInput(v) {
      this.registerForm.account = rmBlank(v)
    },
    registerPasswordInput(v) {
      this.registerForm.password = rmBlank(v)
    },
    registerConfirmPasswordInput(v) {
      this.registerForm.confirmPassword = rmBlank(v)
    },
    submitForm() {
      let _ = this;
      this.$refs['login'].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$request.post({
            url: 'admin/public/authority',
            params: {
              account: rsa.encryptByPublicKey(this.params.account),
              password: rsa.encryptByPublicKey(this.params.password),
              verifyCode: this.params.code,
              verifySign: this.params.verifySign
            },
            success: (res) => {
              setAdminToken(res)
              this.$router.push({path: "/index.vue"})
              this.$message.success('登录成功');
            },
            allError: (e) => {
              console.log(e)
              this.$refs.imgCode.getImgCode();
            },
            finally: () => {
              this.loading = false;
            }
          });
        } else {
          return false;
        }
      });
    },

    resetForm() {
      this.$refs['login'].resetFields();
    },
    register() {
      this.centerDialogVisible = true;
    }
  },

}
</script>

<style scoped>
#login {
  display: flex;
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
  min-width: 1200px;
  background: white;
}

#login > div {
  width: 100%;
  height: 100%;
}

#login .form {
  flex: 1;
  box-sizing: border-box;
  background: whitesmoke;
}

#login .form .el-form {
  width: 80%;
  margin: auto;
  margin-top: 18vh;
}

#login .back_img {
  flex: 3;
}

#login .form_title {
  font-weight: 550;
  font-size: 20px;
  margin-bottom: 15px;
  color: #444444;
}

#login .form .form_btn {
  width: 100%;
  margin-top: 30px;
}

#login .back_img {
  background: url('../assets/img/login_back.jpg') center no-repeat;
  background-size: 60%, 50%;
  display: flex;
  align-items: center;
}

#login .back_img .shade {
  width: 100%;
  height: 100%;
}

#login .back_img .title {
  font-size: 30px;
  width: 60%;
  background: white;
  margin: auto;
  margin-top: 3vh;
  padding: 2% 0;
  text-align: center;
  white-space: nowrap;
  opacity: 0.85;
}

.form-buttons {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.form-buttons .el-button {
  flex: 1;
}

@media screen and (max-width: 768px) {
  #login {
    width: 100%;
    min-width: auto;
  }
}
</style>
